<!--
 * @Author: your name
 * @Date: 2021-07-21 14:27:03
 * @LastEditTime: 2021-07-21 16:03:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /fytsoa_3.1/admin-pro/src/views/cms/site/safety.vue
-->
<template>
  <div class="comprehensive-table-container safety">
    <el-tabs tab-position="left" :style="'height:' + tabsHeight + 'px'">
      <el-tab-pane>
        <span slot="label">
          <i class="ri-sensor-line"></i>
          敏感信息设置
        </span>
        <el-alert
          title="敏感关键字（使用英文逗号分隔）"
          type="info"
          show-icon
        ></el-alert>
        <el-input
          v-model="model.sensitive"
          type="textarea"
          :autosize="{ minRows: 8, maxRows: 15 }"
          placeholder="请输入内容"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-setting"
          style="margin-top: 10px"
          @click="saveSetting"
        >
          确定保存
        </el-button>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <i class="ri-checkbox-multiple-blank-fill"></i>
          IP访问黑名单
        </span>
        <el-alert
          title="设置IP黑名单，不设置全部可访问，如设置IP后，设置的IP不可访问（注：设置IP方式为一行一个IP地址）"
          type="info"
          show-icon
        ></el-alert>
        <el-input
          v-model="model.ipLimit"
          type="textarea"
          :autosize="{ minRows: 8, maxRows: 15 }"
          placeholder="设置IP方式为一行一个IP地址"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-setting"
          style="margin-top: 10px"
          @click="saveSetting"
        >
          确定保存
        </el-button>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <i class="ri-upload-cloud-2-fill"></i>
          上传文件白名单
        </span>
        <el-alert
          title="设置只允许上传文件的后缀名，格式为：”jpg|gig“，以竖线分隔，支持多个后缀名"
          type="info"
          show-icon
        ></el-alert>
        <el-input
          v-model="model.uploadWhite"
          type="textarea"
          :autosize="{ minRows: 8, maxRows: 15 }"
          placeholder="格式为：”jpg|gig“，以竖线分隔"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-setting"
          style="margin-top: 10px"
          @click="saveSetting"
        >
          确定保存
        </el-button>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <i class="ri-upload-cloud-2-line"></i>
          上传文件黑名单
        </span>
        <el-alert
          title="设置不允许上传的文件后缀名，优先级高于白名单，格式为：”jpg|gig“，以竖线分隔，支持多个后缀名"
          type="info"
          show-icon
        ></el-alert>
        <el-input
          v-model="model.uploadBlack"
          type="textarea"
          :autosize="{ minRows: 8, maxRows: 15 }"
          placeholder="格式为：”jpg|gig“，以竖线分隔"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-setting"
          style="margin-top: 10px"
          @click="saveSetting"
        >
          确定保存
        </el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import { get, save } from '@/api/sys/safety'
  export default {
    data() {
      return {
        tabsHeight: window.innerHeight - 150,
        model: {
          sensitive: undefined,
          ipLimit: undefined,
          uploadWhite: undefined,
          uploadBlack: undefined,
        },
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      async init() {
        const t = await get()
        console.log(t)
        this.model = t.data
        console.log(this.model)
      },
      async saveSetting() {
        var res = await save(this.model)
        if (res.code == 200) {
          this.$notify({
            message: '保存成功',
            type: 'success',
          })
        } else {
          this.$notify({
            message: res.message,
            type: 'error',
          })
        }
      },
    },
  }
</script>
<style lang="scss" scoped></style>
<style>
  .safety .el-tabs__nav-wrap.is-left {
    background: #edf5ff;
    width: 220px;
  }
  .safety .el-tabs--left .el-tabs__item.is-left {
    text-align: left;
    font-weight: normal;
    height: 45px;
    line-height: 45px;
  }
  .safety .el-tabs--left .el-tabs__item.is-left i {
    font-size: 17px;
    position: relative;
    top: 3px;
  }
  .safety .el-tabs--left .el-tabs__item.is-active {
    background: #ffffff;
  }
</style>
